<script setup lang="ts">
import { ref } from "vue";
import type { Ref } from "vue";
import type { KnowledgeType } from "@/types/homeTypes/homeTypes.ts";
import useConsultStore from "@/pinia/modules/consultStore/consultStore.ts";
import KnowledgeList from "@/views/home/components/knowledgeList/knowledgeList.vue";
import FollowDoctor from "@/views/home/components/followDoctor/followDoctor.vue";
import { ConsultType } from "@/enums";

const consultStore = useConsultStore();

const active: Ref<KnowledgeType> = ref<KnowledgeType>("like");


</script>

<template>
   <div class="home-page">
      <div class="home-header">
         <div class="con">
            <h2>优医问诊</h2>
            <div class="search">
               <svg-icon svg-name="search"></svg-icon>
               搜一搜：疾病/症状/医生/健康知识
            </div>
         </div>
      </div>
      <div class="home-navs">
         <van-row>
            <van-col span="8">
               <router-link to="/" class="nav">
                  <svg-icon svg-name="doctor" width="45px" height="45px"></svg-icon>
                  <p class="title">问医生</p>
                  <p class="desc">按科室查问医生</p>
               </router-link>
            </van-col>
            <van-col span="8">
               <router-link to="/consult" class="nav" @click="consultStore.setType(ConsultType.Fast)">
                  <svg-icon svg-name="graphic"width="45px" height="45px"></svg-icon>
                  <p class="title">极速问诊</p>
                  <p class="desc">20s医生极速回复</p>
               </router-link>
            </van-col>
            <van-col span="8">
               <router-link to="/" class="nav">
                  <svg-icon svg-name="prescribe" width="45px" height="45px"></svg-icon>
                  <p class="title">开药门诊</p>
                  <p class="desc">线上买药更方便</p>
               </router-link>
            </van-col>
         </van-row>
         <van-row>
            <van-col span="6">
               <router-link to="/" class="nav min">
                  <svg-icon svg-name="order" width="30px" height="30px"></svg-icon>
                  <p class="title">药品订单</p>
               </router-link>
            </van-col>
            <van-col span="6">
               <router-link to="/user/consult" class="nav min">
                  <svg-icon svg-name="docs" width="30px" height="30px"></svg-icon>
                  <p class="title">问诊记录</p>
               </router-link>
            </van-col>
            <van-col span="6">
               <router-link to="/" class="nav min">
                  <svg-icon svg-name="rp" width="30px" height="30px"></svg-icon>
                  <p class="title">我的处方</p>
               </router-link>
            </van-col>
            <van-col span="6">
               <router-link to="/" class="nav min">
                  <svg-icon svg-name="find" width="30px" height="30px"></svg-icon>
                  <p class="title">疾病查询</p>
               </router-link>
            </van-col>
         </van-row>
      </div>
      <div class="home-banner">
         <van-swipe indicator-color="#fff">
            <van-swipe-item>
               <img src="@/assets/banner1.png" alt="" />
            </van-swipe-item>
            <van-swipe-item>
               <img src="@/assets/banner1.png" alt="" />
            </van-swipe-item>
         </van-swipe>
      </div>
      <van-tabs shrink sticky v-model:active="active">
         <van-tab title="关注" name="like">
            <FollowDoctor></FollowDoctor>
            <KnowledgeList :type="active"></KnowledgeList>
         </van-tab>
         <van-tab title="推荐" name="recommend">
            <KnowledgeList :type="active"></KnowledgeList>
         </van-tab>
         <van-tab title="减脂" name="fatReduction">
            <KnowledgeList :type="active"></KnowledgeList>
         </van-tab>
         <van-tab title="饮食" name="food">
            <KnowledgeList :type="active"></KnowledgeList>
         </van-tab>
      </van-tabs>

   </div>
</template>

<style lang="scss" scoped>
.home-page {
   padding-bottom: 50px;

   .home-header {
      height: 100px;
      position: relative;

      &::before {
         content: '';
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 90px;
         background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
         border-bottom-left-radius: 150px 20px;
         border-bottom-right-radius: 150px 20px;
      }

      .con {
         position: relative;
         padding: 0 15px;

         > h2 {
            font-size: 18px;
            color: #fff;
            font-weight: normal;
            padding: 20px 0;

         }

         .search {
            height: 40px;
            border-radius: 20px;
            box-shadow: 0px 15px 22px -7px rgba(224, 236, 250, 0.8);
            background-color: #fff;
            display: flex;
            align-items: center;
            padding: 0 20px;
            color: var(--cp-dark);
            font-size: 13px;

            .svg-icon {
               font-size: 16px;
               margin-right: 5px;
            }
         }
      }
   }

   .home-navs {
      padding: 10px 15px 0 15px;

      .nav {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 10px 0;

         .svg-icon {
            font-size: 48px;
         }

         .title {
            font-weight: 500;
            margin-top: 5px;
            color: var(--cp-text1);
         }

         .desc {
            font-size: 11px;
            color: var(--cp-tag);
            margin-top: 2px;
         }

         &.min {
            .svg-icon {
               font-size: 31px;
            }

            .title {
               font-size: 12px;
               color: var(--cp-text2);
               font-weight: normal;
            }
         }
      }
   }

   .home-banner {
      padding: 10px 15px;
      height: 120px;

      img {
         width: 100%;
         height: 100%;
      }
   }

   :deep(.van-tabs) {
      .van-tabs__nav {
         padding: 0 0 15px 0;
      }

      .van-tabs__line {
         width: 20px;
         background-color: var(--cp-primary);
      }

      .van-tab {
         padding: 0 15px;
      }
   }

}
</style>
